const cvs = document.querySelector('canvas');
const ctx = cvs.getContext("2d");
const col = 5;
const row = 5;
const GW = 70;
const GH = 70;
const SW = 100;
const SH = 200;
const SX = 50;
const SY = 50;

let board = [];

function draw(){
    ctx.fillStyle = 'silver';
    ctx.fillRect(SX, SY, col*GW, row*GH);
    ctx.fillStyle = 'green';
    ctx.fillRect(SX + col*GW + 50, SY, SW, SH);

    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.moveTo(SX + col*GW + 50, SY + SH / 2);
    ctx.lineTo(SX + col*GW + 50 + SW, SY + SH / 2);
    ctx.strokeRect(SX + col*GW + 50, SY, SW, SH);
    for (let y = 0; y < row; y++){
        for (let x = 0; x < col; x++){
            ctx.strokeRect(SX + x*GW, SY + y*GH, GW, GH);
        }
    }
    ctx.stroke();
    ctx.closePath();

    for (let y = 0; y < row; y++){
        for(let x = 0; x < col; x++){
            if(board[y][x] == 1){
                ctx.fillStyle = 'black';
                cx = SX + x*GW + GW/2;
                cy = SY + y*GH + GH/2;
                radius = 10; // TODO change
            }
        }
    }
}

function drawHammer(gx, gy){
    let x1 = pixelX(gx) + 1;
}

draw();
